<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>main</title>
    <script type="text/javascript">
    function openWindows(){
        var name=prompt("请输入名称：");
        window.location.href="/addContainer/"+name+""
    }
    </script>
    {% load static %}
    <link rel="stylesheet" type="text/css" href="{% static 'css/containers.css' %}"/>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
       <div id="main" align="center">
         <h1><img src="{% static 'img/swift.jpg' %}" width="125" height="105" align="center" /></h1>
         <hr style="width: 80%; margin: 0 auto; border: 1px; height: 1px; background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));">
         <!-- 容器标题和搜索表单 -->
        <div class="container-header">
            <h1>当前可用容器</h1>
            <form method="get" action="/containers/" class="search-form">
                <input type="text" class="form-control" name="search" placeholder="搜索容器" value="{{ search_query }}">
                <button class="btn btn-outline-secondary" type="submit">搜索</button>
            </form>
        </div>

         {% if resp1 %}
        <table border="1" align="center" style=" width:1000px;height:150px;">
            <tr style="width:320px">
                <th style="height: 50px;width:240px">名称</th>
                <th style="height: 50px;width:200px">对象数</th>
                <th style="height: 50px;width:240px">容器大小</th>
                <th style="height: 50px;width:240px">操作</th>

            </tr>
            {% for key in resp1 %}
            <tr>
                <td style="height: 50px;">{{key.name}}</td>
                <td style="height: 50px;">{{key.count}}</td>
                <td style="height: 50px;">{{key.bytes}}</td>
                <td  align="center" style="height: 50px;">
                    <input  class="butt1" type="button" value="进入" onclick='window.location.href="/objects/{{key.name}}"'>
                    <input class="butt1" type="button" value="删除" onclick='window.location.href="/hmz/main5/{{key.name}}"'>
                    <input class="butt1" type="button" value="添加" onclick="openWindows();"/>
                </td>
            </tr>
            {% endfor %}
        </table>
           {% endif %}
           <div class="d-flex justify-content-center mt-4">
    {% if resp1.has_previous or resp1.has_next %}
        <nav aria-label="Page navigation">
            <ul class="pagination">
                {% if resp1.has_previous %}
                    <li class="page-item">
                        <a class="page-link" href="?page=1" aria-label="首页">
                            <span aria-hidden="true">&laquo;&laquo;</span>
                        </a>
                    </li>
                    <li class="page-item">
                        <a class="page-link" href="?page={{ resp1.previous_page_number }}" aria-label="上一页">
                            <span aria-hidden="true">&laquo;</span>
                        </a>
                    </li>
                {% else %}
                    <li class="page-item disabled">
                        <span class="page-link" aria-hidden="true">&laquo;&laquo;</span>
                    </li>
                    <li class="page-item disabled">
                        <span class="page-link" aria-hidden="true">&laquo;</span>
                    </li>
                {% endif %}

                {% for num in resp1.paginator.page_range %}
                    {% if resp1.number == num %}
                        <li class="page-item active" aria-current="page">
                            <span class="page-link">{{ num }}</span>
                        </li>
                    {% elif num > resp1.number|add:'-3' and num < resp1.number|add:'3' %}
                        <li class="page-item">
                            <a class="page-link" href="?page={{ num }}">{{ num }}</a>
                        </li>
                    {% endif %}
                {% endfor %}

                {% if resp1.has_next %}
                    <li class="page-item">
                        <a class="page-link" href="?page={{ resp1.next_page_number }}" aria-label="下一页">
                            <span aria-hidden="true">&raquo;</span>
                        </a>
                    </li>
                    <li class="page-item">
                        <a class="page-link" href="?page={{ resp1.paginator.num_pages }}" aria-label="末页">
                            <span aria-hidden="true">&raquo;&raquo;</span>
                        </a>
                    </li>
                {% else %}
                    <li class="page-item disabled">
                        <span class="page-link" aria-hidden="true">&raquo;</span>
                    </li>
                    <li class="page-item disabled">
                        <span class="page-link" aria-hidden="true">&raquo;&raquo;</span>
                    </li>
                {% endif %}
            </ul>
        </nav>
    {% else %}
        <p>没有容器</p>
    {% endif %}
</div>
        <br/><br/><br/><br/><br/>
        <a href="/login/"><button class="butt">退出登录</button></a>
     </div>

</body>
</html>
<style>
    /* containers.css */

/* 设置 h1 和搜索表单在同一行 */
.container-header {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

/* 设置 h1 的样式 */
.container-header h1 {
    font-size: 25px;
    margin: 30px;
}

/* 设置搜索表单的样式 */
.search-form {
    display: flex;
    align-items: center;
    margin-left: 50px;
    margin-bottom: 20px;

}

/* 设置搜索框的高度和宽度 */
.search-form input[type="text"] {
    width: 200px; /* 设置宽度 */
    height: 35px; /* 设置高度 */
    padding: 3px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    margin-right: 2px; /* 设置间距 */
}

/* 设置搜索按钮的样式 */
.search-form button {
    height: 35px; /* 设置高度 */
    padding: 5px 10px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    background-color: #007bff;
    color: white;
    cursor: pointer;
}

.search-form button:hover {
    background-color: #0056b3;
}

</style>